<template>
    <el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl"
        custom-class="drawer-right-side" :before-close="closeDrawer" :append-to-body="true" size="100%">
        <div class="page-main">
            <div class="page-sidebar">
                <el-menu :default-active="activeMenu">
                    <el-menu-item :index="item.id + ''" v-for="item in cateList" :key="item.id"
                        @click="getGoodsList(item.id)">{{ item.title }}</el-menu-item>
                </el-menu>
                <div class="goods-list" v-if="goodsList.length > 0">
                    <div class="product" v-for="item in goodsList" :key="item.id">
                        <div class="product-title">{{ item.title }}</div>
                        <div class="list-price">
                            <el-table :data="item.spec" border :highlight-current-row="false">
                                <el-table-column prop="suk" label="规格"></el-table-column>
                                <el-table-column prop="price" label="价格"></el-table-column>
                                <el-table-column label="" width="100" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="mini"
                                            @click="selectedIt(item, scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <el-empty v-else class="empty" description="请选择分类"></el-empty>
            </div>
            <div class="page-right">

                <div class="goods-list selected-goods-list" v-if="selectGoodsList.length > 0">
                    <div class="product" v-for="item in selectGoodsList" :key="item.id">
                        <div class="product-title">{{ item.title }}</div>
                        <div class="list-price" v-if="item.can_update_price==1">
                            <el-table :data="item.spec" border :highlight-current-row="false">
                                <el-table-column prop="suk" label="规格"></el-table-column>
                                <el-table-column prop="price" label="价格" width="120" align="center">
                                    <template slot-scope="scope">
                                        {{ scope.row.price }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="give" label="赠送" width="120" align="center">
                                    <template slot-scope="scope">
                                        <el-checkbox v-model="scope.row.give" :true-label="1"
                                            :false-label="0">赠送</el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column label="数量">
                                    <template slot-scope="scope">
                                        <el-input-number v-model="scope.row.amount" :min="0" :max="100" label="描述文字"
                                            @change="changeNum(item, scope.row)"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="suk" label="修改价格">
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="mini"
                                            @click="editePrice(item, scope.row)">编辑</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="list-price" v-else>
                            <el-table :data="item.spec" border :highlight-current-row="false">
                                <el-table-column prop="suk" label="规格"></el-table-column>
                                <el-table-column prop="price" label="价格" width="120" align="center">
                                    <template slot-scope="scope">
                                        {{ scope.row.price }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="give" label="赠送" width="120" align="center">
                                    <template slot-scope="scope">
                                        <el-checkbox v-model="scope.row.give" :true-label="1"
                                            :false-label="0">赠送</el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column label="数量">
                                    <template slot-scope="scope">
                                        <el-input-number v-model="scope.row.amount" :min="0" :max="100" label="描述文字"
                                            @change="changeNum(item, scope.row)"></el-input-number>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <el-empty v-else description="请选择规格"></el-empty>

                <div class="fixed-bottom">
                    <div class="left">
                        <el-form label-width="80px" :model="ruleForm">

                            <el-form-item label="总金额">
                                {{ totals }}
                            </el-form-item>
                            <el-form-item label="优惠" prop="discount">
                                <el-input v-model="ruleForm.discount" placeholder="请输入优惠金额"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input v-model="ruleForm.remark" type="textarea" rows="2"
                                    placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </el-form>

                    </div>
                    <div class="right">
                        <el-button class="submit" type="primary" size="small" @click="submit">生成二销订单</el-button>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false"
 :append-to-body="true" title="自定义价格">
            <el-form :model="editPriceForm" label-width="80px">
                <el-form-item label="新价格">
                    <el-input type="number" v-model="editPriceForm.newPrice" placeholder="请输入新价格"></el-input>
                </el-form-item>
            </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEditPrice">确定</el-button>
            </span>
        </template>
    </el-dialog>
    </el-drawer>

</template>

<script>
import pickerView from "@/components/picker/select.vue";
import uploadFiles from '@/components/upload/files.vue';
import {
    getCategoryPickerApi
} from "@/api/product/category";
import {
    getGoodsByCategoryApi
} from '@/api/product/goods.js'

import {
    createOrderApi
} from '@/api/order/suborder.js'

export default {
    components: {
        pickerView,
        uploadFiles
    },
    data() {
        return {
            activeMenu: "",
            formDrawer: {
                title: "添加二销订单",
                visible: false,
            },
            ruleForm: {
                order_id: "",
                discount: "",
                remark: "",
                note: "",
                receipt: "",
            },
            cate_id: "",
            cateList: [],
            goodsList: [],
            selectGoodsList: [],
            discount: '',
            dialogVisible: false, // 编辑价格弹窗
            editPriceForm: {
                newPrice: '',
                targetGoods: null,
                targetSpec: null
            }
        }
    },
    computed: {
        totals() {
            let total = 0;
            this.selectGoodsList.forEach((v) => {
                v.spec.forEach((s) => {
                    if (s.give == 1) {
                        return;
                    }
                    total += s.amount * s.price;
                })
            });
            total = total - this.ruleForm.discount;
            return total.toFixed(2);
        }
    },
    methods: {
        showDrawer(order_id) {
            this.formDrawer.visible = true;
            this.activeMenu = "";
            this.selectGoodsList = [];
            this.ruleForm = {
                order_id: order_id,
                discount: "",
                remark: "",
                note: "",
                receipt: "",
            }
            this.$nextTick(() => {
                // this.$refs.receiptRef.clearFiles();
                // this.$refs.noteRef.clearFiles();
            })
            this.getGoodsCateList();
        },
        // ... existing code ...
        editePrice(goods, spec) {
            this.dialogVisible = true;
            this.editPriceForm.targetGoods = goods;
            this.editPriceForm.targetSpec = spec;
            this.editPriceForm.newPrice = spec.price;
        },
        saveEditPrice() {
            if (this.editPriceForm.targetGoods && this.editPriceForm.targetSpec) {
                this.editPriceForm.targetSpec.price = parseFloat(this.editPriceForm.newPrice);
                this.dialogVisible = false;
            }
        },
        closeDrawer() {
            this.formDrawer.visible = false;
        },
        getGoodsCateList() {
            getCategoryPickerApi().then((res) => {
                this.cateList = res.data.list;
            })
        },
        getGoodsList(e) {
            console.log(e)
            if (!e) {
                return;
            }

            getGoodsByCategoryApi({
                cate_id: e
            }).then((res) => {
                this.goodsList = res.data.list;
            })
        },
        selectedIt(goods, spec) {
          //  console.log(goods, spec);
            spec.amount = 1;
            spec.give = 0;
            // 查看已经选择的商品中是否有这个商品
            let index = this.selectGoodsList.findIndex((v) => {
                return v.id == goods.id;
            });

            if (index == -1) {
                // 没有这个商品，重置spec，然后push
                let item = Object.assign({}, goods);
                item.spec = [spec];
                this.selectGoodsList.push(item);
            } else {
                // 有这个商品，查看spec是否已经存在
                let isExist = this.selectGoodsList[index].spec.findIndex((v) => {
                    return v.unique == spec.unique;
                });

                if (isExist == -1) {
                    this.selectGoodsList[index].spec.push(spec);
                }
            }

        },
        changeNum(item, row) {
            // console.log(item, row);
            // 如果数量为0 删除
            if (row.amount == 0) {
                let index = item.spec.findIndex((v) => {
                    return v.unique == row.unique;
                });

                item.spec.splice(index, 1);
            }

            // item 的 spec 里面的 所有数量为0 seletedGoodsList 里面删除
            let total = 0;
            item.spec.forEach((v) => {
                total += v.amount;
            });

            if (total == 0) {
                let index = this.selectGoodsList.findIndex((v) => {
                    return v.id == item.id;
                });

                this.selectGoodsList.splice(index, 1);
            }

        },
        submit() {
            if (this.selectGoodsList.length == 0) {
                this.$message.warning("请选择商品");
                return;
            }

            let params = Object.assign({}, this.ruleForm);
            params.goods = this.selectGoodsList;
            params.totals = this.totals;

            createOrderApi(params).then((res) => {
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.$emit("doRefresh");
                    this.closeDrawer();
                } else {
                    this.$message.error(res.msg);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.page-main {
    display: flex;
    height: calc(100vh - 55px);
    overflow: hidden;

    .goods-list {
        flex: 1;
        padding: 10px;
        height: calc(100vh - 150px);
        overflow-y: auto;

        .product {
            margin-bottom: 10px;

            .product-title {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 8px;
            }
        }
    }

    .selected-goods-list {
        height: calc(100vh - 350px);
    }

    .page-sidebar {
        display: flex;
        width: 50%;
        height: 100%;
        background-color: #f5f5f5;
        border-right: 1px solid #ebeef5;

        .empty {
            flex: 1;
            justify-content: start;
        }
    }

    .page-right {
        width: 50%;
        padding: 10px;
        overflow: hidden;

        .fixed-bottom {
            position: fixed;
            bottom: 0;
            right: 0;
            // width 继承父元素的宽度
            width: 50%;
            padding: 10px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;

            .left {
                width: 50%;

                .flex-box {
                    display: flex;
                    align-items: center;

                    span {
                        width: fit-content;
                        // 不换行
                        white-space: nowrap;
                        margin-right: 10px;
                    }
                }
            }

            .right {
                display: flex;
                // 使得按钮在右侧
                justify-content: flex-end;
                width: 50%;
                text-align: right;
                padding: 0 20px;

                .submit {
                    height: 100%;
                }
            }
        }
    }
}
</style>
